﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label="" prop="code">
              <el-input v-model="queryBox.studentCode" placeholder="客户编号">
                <template slot="prepend">客户编号</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">跟进人</div>
              <el-autocomplete
                v-model="userName"
                :fetch-suggestions="querySearchAsync2"
                placeholder="请输入内容"
                @select="handleSelect2"
              ></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">客户类型</div>
              <el-select filterable clearable v-model="queryBox.customerType">
                <el-option
                  v-for="item in student_type_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="depart-box">
              <div class="slect-title">跟进时间</div>
              <el-date-picker
                v-model="trackingDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>
    <!--表格内容栏-->
    <Crm-table
      class="table-width"
      :showBatchDelete="false"
      CustomerFollowlogstu
      width="400"
      permsEdit="sys:user:edit"
      permsDelete="sys:user:delete"
      :data="pageResult"
      :columns="columns"
      :loading="loading"
      perms="true"
      @findPage="findPage"
      @handleSee="handleSee"
    >
    </Crm-table>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import distributionPop from "@/components/distributionPop";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import CustomerOwnership from "@/components/CustomerOwnership";
import { CodeToText } from "element-china-area-data";
import axios from "axios";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch,
    distributionPop
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      showBatchDelete: false,
      student_data_from_options: [],
      student_progress_options: [],
      student_data_from_type_options: [],
      student_type_options: [],
      userName: "",
      // 查询条件
      queryBox: {},
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "studentInfo.code", label: "客户编号", minWidth: 150 },
        { prop: "studentInfo.name", label: "学生姓名", minWidth: 80 },
        { prop: "studentInfo.oemAccount", label: "OEM卡号", minWidth: 80 },
        { prop: "studentInfo.school", label: "学校名称", minWidth: 100 },
        { prop: "studentInfo.laiyuan", label: "客户来源", minWidth: 100 },
        { prop: "studentInfo.type", label: "客户类型", minWidth: 100 },
        { prop: "getprogress", label: "客户进展", minWidth: 70 },
        { prop: "diqu", label: "地区", minWidth: 190 },
        { prop: "areaInput", label: "详细地址", minWidth: 120 },
        {
          prop: "studentTrackingInfo.trackingPeople",
          label: "跟进人",
          minWidth: 100
        },
        { prop: "studentInfo.createDate", label: "创建时间", minWidth: 140 },
        {
          prop: "studentTrackingInfo.contractDate",
          label: "跟进时间",
          minWidth: 140
        }
      ],
      pageRequest: { pageNum: 1, pageSize: 8 },
      pageResult: {
        content: []
      },
      roles: [],
      trackingDate: "",
      loading: false // 加载标识
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      // this.pageRequest.columnFilters = {
      //   name: { name: "name", value: this.filters.name }
      // };
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.student
        .studentTrackingQueryTrackingList(this.queryBox)
        .then(res => {
          let content = {
            content: res.listStudentTrackingDetail,
            totalSize: res.total
          };
          this.pageResult = content;

          this.pageResult.content.forEach(item => {
            if (
              (item.province == null && item.city == null) ||
              (item.province == "null" && item.city == "null")
            ) {
              item.diqu = "";
            } else {
              item.diqu =
                CodeToText[item.province] +
                CodeToText[item.city] +
                CodeToText[item.area]+(item.areaInput==null?'':item.areaInput);
            }
            this.student_data_from_options.forEach(data_from_item => {
              if (data_from_item.key == item.studentInfo.dataFrom) {
                item.studentInfo.laiyuan = data_from_item.value;
              }
            });
            this.student_progress_options.forEach(progress_item => {
              if (progress_item.key == item.studentInfo.progress) {
                item.getprogress = progress_item.value;
              }
            });
            this.student_type_options.forEach(type_item => {
              if (type_item.key == item.studentInfo.type) {
                item.studentInfo.type = type_item.value;
              }
            });
          });
          this.loading = false;
          // this.pageResult = res.data;
          // this.findUserRoles();
        })
        .then(data != null ? data.callback : "");
    },
    // 查询
    search() {
      this.queryBox.trackingDateStart = this.trackingDate[0];
      this.queryBox.trackingDateEnd = this.trackingDate[1];
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 加载用户角色信息
    findUserRoles: function() {
      this.$api.role.findAll().then(res => {
        // 加载角色集合
        this.roles = res.data;
      });
    },
    // 批量删除
    handleDelete: function(data) {
      this.$api.user
        .batchDelete(data.params)
        .then(data != null ? data.callback : "");
    },
    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.FollowTime = "";
      this.queryBox.studentCode = "";
      this.queryBox.trackingPeople = "";
      this.trackingDate = "";
      this.queryBox.trackingDateStart = "";
      this.queryBox.trackingDateEnd = "";
      this.userName = "";
      this.queryBox.trackingPeople = "";
      this.pageRequest.pageNum = 1;
      this.queryBox.customerType=''
      this.findPage(null);
    },
    // 查看客户档案
    handleSee(params) {
      this.dataForm = Object.assign({}, params.row);
      this.$router.push({
        path: "/Customerfile/Student",
        query: {
          id: params.row.studentInfo.id
        }
      });
    },
    // 菜单树选中
    deptTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.id;
      this.dataForm.deptName = data.name;
    },
    // 菜单树选中
    handleOptionClick() {},
    get_student_data_from() {
      this.$api.user
        .optionsList({ codeType: "student_data_from" })
        .then(res => {
          this.student_data_from_options = res.keyValueList;
        });
    },
    get_student_progress() {
      this.$api.user.optionsList({ codeType: "student_progress" }).then(res => {
        this.student_progress_options = res.keyValueList;
      });
    },
    get_student_type() {
      this.$api.user.optionsList({ codeType: "student_type" }).then(res => {
        this.student_type_options = res.keyValueList;
      });
    },
    // 跟进人
    querySearchAsync2(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      this.$api.dropdown.users({ userType: 3 }).then(res => {
        for (let i of res.userInfoList) {
          i.value = i.realName; //将想要展示的数据作为value
        }
        restaurants = res.userInfoList;
        results = queryString
          ? restaurants.filter(this.createFilter2(queryString))
          : restaurants;
        callback(results);
      });
    },
    createFilter2(queryString) {
      return restaurant => {
        return (
          restaurant.realName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect2(item) {
      this.queryBox.trackingPeople = item.id;
    }
  },
  mounted() {
    this.get_student_type();
    this.get_student_data_from();
    this.get_student_progress();
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
